/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableHighlight,
    Dimensions,
    Platform
} from 'react-native';

import {Actions} from 'react-native-router-flux'
import CommonStyles from '../styles/common';
import Colors from '../styles/colors';
import Ionicons from 'react-native-vector-icons/Ionicons'
import ToolModal from './toolModal'

export default class TabView extends Component {
    constructor (props) {
        super(props)
    }
    
    render() {
        //头像背景
        const userAvatarBg = !this.props.userInfo? styles.userAvatarofflineBg:styles.userAvataronlineBg;
        //头像图片
        var userAvatarImg = <Ionicons style={{color:'#ddd'}} name={(Platform.OS==='android'?'md':Platform.OS)+'-person'} size={45} />;
        //性别头像
        var genderImg=null;
        if(this.props.userInfo)
        {
            if (this.props.userInfo.portrait)
            {
                userAvatarImg =<Image source={{uri: this.props.userInfo.portrait}} style={[styles.userAvatar]}/>;
            }
            
            if(this.props.userInfo.gender)
            {
                if(this.props.userInfo.gender=='1')
                {
                    genderImg = <View style={styles.userGenderImg}><Ionicons style={{color:'#fff'}} name={(Platform.OS==='android'?'md':Platform.OS)+'-male'} size={10} /></View>;
                }
                else if(this.props.userInfo.gender=='2')
                {
                    genderImg = <View style={styles.userGenderImg}><Ionicons style={{color:'#fff'}} name={(Platform.OS==='android'?'md':Platform.OS)+'-female'} size={10} /></View>;
                }
            }
        }
 
        return (
            <View style={[CommonStyles.container]}>
                {this.props.mainSelectedTab==='tab5'?<ToolModal {...this.props}/>:null}
                <View style={styles.userCenterView}>
                    <Image source={ require('./../images/user_center_bg.png')} style={styles.userCenterBg}/>
                    <View style={styles.userCenterInfo}>
                        <View style={[styles.userInfoAvatar,userAvatarBg]}>
                            <TouchableHighlight underlayColor={'#fff'} onPress={Actions.login}>
                                {userAvatarImg}
                            </TouchableHighlight>
                            {genderImg}
                        </View>
                        <View>
                            <Text style={styles.userNameText}>{!this.props.userInfo?'未登录':this.props.userInfo.name['#cdata']}</Text>
                        </View>                                    
                    </View>
                    {this.props.userInfo?
                        (<View style={styles.userInfoDetail}>
                            <TouchableHighlight style={styles.userInfoDetailColumn} underlayColor={'#fff'}>
                                <View style={styles.userInfoDetailColumnItem}>
                                    <Text style={styles.userInfoDetailColumnText}>{!this.props.userInfo.score?0:this.props.userInfo.score}</Text>
                                    <Text style={styles.userInfoDetailColumnText}>积分</Text>
                                </View>
                            </TouchableHighlight>
                            <TouchableHighlight style={styles.userInfoDetailColumn} underlayColor={'#fff'}>
                                <View style={styles.userInfoDetailColumnItem}>
                                    <Text style={styles.userInfoDetailColumnText}>{!this.props.userInfo.favoritecount?0:this.props.userInfo.favoritecount}</Text>
                                    <Text style={styles.userInfoDetailColumnText}>收藏</Text>
                                </View>
                            </TouchableHighlight>
                            <TouchableHighlight style={styles.userInfoDetailColumn} underlayColor={'#fff'}>
                                <View style={styles.userInfoDetailColumnItem}>
                                    <Text style={styles.userInfoDetailColumnText}>{!this.props.userInfo.followers?0:this.props.userInfo.followers}</Text>
                                    <Text style={styles.userInfoDetailColumnText}>关注</Text>
                                </View>
                                </TouchableHighlight>
                            <TouchableHighlight style={styles.userInfoDetailColumn} underlayColor={'#fff'}>
                                <View style={styles.userInfoDetailColumnItem}>
                                    <Text style={styles.userInfoDetailColumnText}>{!this.props.userInfo.fans?0:this.props.userInfo.fans}</Text>
                                    <Text style={styles.userInfoDetailColumnText}>粉丝</Text>
                                </View>   
                            </TouchableHighlight>                                                                                              
                        </View>)
                    :null}                     
                </View>
                <View style={styles.userCenterActionView}>
                    <TouchableHighlight style={styles.userCenterActionColumnContainer} underlayColor={'#fff'}>
                        <View style={styles.userCenterActionColumn}>
                            <View style={styles.ActionImgContainer}>
                                <Ionicons style={styles.userCenterActionColumnItemImg} name={(Platform.OS==='android'?'md':Platform.OS)+'-mail'} size={24} />
                            </View>
                            <Text style={styles.userCenterActionColumnItemText}>消息</Text>
                        </View>                            
                    </TouchableHighlight>
                    <TouchableHighlight style={styles.userCenterActionColumnContainer} underlayColor={'#fff'}>
                        <View style={styles.userCenterActionColumn}>
                            <View style={styles.ActionImgContainer}>
                                <Ionicons style={styles.userCenterActionColumnItemImg}  name={(Platform.OS==='android'?'md':Platform.OS)+'-paper'} size={24} />
                            </View>
                            <Text style={styles.userCenterActionColumnItemText}>博客</Text>
                        </View>                            
                    </TouchableHighlight>
                    <TouchableHighlight style={styles.userCenterActionColumnContainer} underlayColor={'#fff'}>
                        <View style={styles.userCenterActionColumn}>
                            <View style={styles.ActionImgContainer}>
                                <Ionicons style={styles.userCenterActionColumnItemImg} name={(Platform.OS==='android'?'md':Platform.OS)+'-people'} size={24} />
                            </View>
                            <Text style={styles.userCenterActionColumnItemText}>团队</Text>
                        </View>                            
                    </TouchableHighlight>
                    <TouchableHighlight style={styles.userCenterActionColumnContainer} underlayColor={'#fff'}>
                        <View style={styles.userCenterActionColumn}>
                            <View style={styles.ActionImgContainer}>
                                <Ionicons style={styles.userCenterActionColumnItemImg} name={(Platform.OS==='android'?'md':Platform.OS)+'-chatboxes'} size={24} />
                            </View>
                            <Text style={styles.userCenterActionColumnItemText}>反馈</Text>
                        </View>                            
                    </TouchableHighlight>                                                                
                </View>                    
            </View>
        );
    }
}

const styles = StyleSheet.create({
    userCenterView:{
        width:Dimensions.get('window').width,
        height:150,        
    },
    userCenterBg: {
        width:Dimensions.get('window').width,
        height:150,
    },
    userCenterInfo:{
        flex:1,
        flexDirection: 'column',
        position: 'absolute',
        top:15,
        left:Dimensions.get('window').width/2-25,
        alignItems:'center',
    },
    userInfoAvatar:{
        width:50,
        height:50,
        alignItems:'center',
        justifyContent:'center',
        borderColor: '#ddd',
        borderWidth: 2,
        borderRadius: 25,
    },
    userAvatarofflineBg:
    {
        backgroundColor:'#bbb',
    },
    userAvataronlineBg:
    {
        backgroundColor:'#eee',
    },
    userAvatar:{
        width:48,
        height:48,
        borderWidth: 0,
        borderRadius: 24,
    },
    userNameText:{
        color:'#fff',
        fontSize:18
    },
    userInfoDetail:{
        width:Dimensions.get('window').width,
        height:50,
        flex:1,
        flexDirection: 'row', 
        position: 'absolute',
        bottom:0,
        borderTopColor: '#17BE3D',
        borderTopWidth : 1,
        paddingTop:3
    },
    userInfoDetailColumn:{
        flex:1,
        alignItems:'center',
        justifyContent:'center',
    },
    userInfoDetailColumnItem:{
        flex:1,
        alignItems:'center',
    },
    userInfoDetailColumnText:{
        color:'#fff'
    },
    userGenderImg:
    {
        width:12,
        height:12,
        alignItems:'center',
        justifyContent:'center',
        position: 'absolute',
        bottom:0,
        right:0,
        backgroundColor:'#77C1FE',
        borderWidth: 0,
        borderRadius: 6,
    },
    userCenterActionView:
    {
        width:Dimensions.get('window').width,
        flexDirection: 'column',
    },
    userCenterActionColumnContainer:{
        flex:1,
        flexDirection: 'column',
    },
    userCenterActionColumn:
    {
        width:Dimensions.get('window').width,
        height:50,
        justifyContent:'flex-start',
        alignItems:'center',
        paddingLeft:20,
        flexDirection: 'row',
        borderBottomColor: '#E7E7E7',
        borderBottomWidth : 1,
    },
    ActionImgContainer:{
        width:30,
        height:30,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:Colors.main_green,
        borderWidth: 0,
        borderRadius: 15,
        marginRight:15
    },
    userCenterActionColumnItemImg:{
        color:'#fff'
    },
    userCenterActionColumnItemText:{
        fontSize:20
    }
});
